<template>
  <div class="current-stock-warp">
    <div class="current-stock-title">
      <h3>当前库存（改版中...）</h3>
      <a href="javascript:;">更多 &gt</a>
    </div>

    <div id="currentStock" style="width: 100%;height: 314px;">

    </div>
  </div>
</template>

<script>
  let echarts = require('echarts');
  let myChart;
  export default ({
    data(){
      return {

      }
    },
    mounted(){
      let option =  {
        color: ['#409feb',],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['出库', '入库', '越库配送'],
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            axisLine:{
              lineStyle:{
                color:'#9b9b9b'
              }
            },
            data: ['手霜', '面膜', '面霜', '纤形霜', '润肤水']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine:{show: false},//取消辅助线
            axisLine:{
              lineStyle:{
                color:'#9b9b9b'
              }
            },
          },
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barGap: 0,
            barWidth : 15,//条形宽度
            data: [28, 25, 30, 30, 35]
          },
        ]
      };
      myChart = echarts.init(document.getElementById('currentStock'));
      myChart.setOption(option);
    }
  })
</script>

<style scoped>
  .current-stock-warp{
    margin-top: 20px;
    width: 384px;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
  }
  .current-stock-title{
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #e8e8e8;
  }
  .current-stock-title h3{
    margin-left: 20px;
  }
  .current-stock-title a{
    font-size: 12px;
    color: #0e83e6;
    margin-right: 20px;
  }
</style>
